<template>
  <div class="big-clock">{{hours}}:{{minutes}}:{{seconds}}</div>
</template>
<script>
export default {
  data() {
      let today = new Date()
      return {
        hours: today.getHours(),
        minutes: today.getMinutes(),
        seconds: today.getSeconds()
      }
  },
  methods: {
    handleNowTime() {
      let today = new Date()
      this.hours = today.getHours()
      this.minutes = today.getMinutes()
      this.seconds = today.getSeconds()
    }
  },
  mounted() {
    setInterval(this.handleNowTime, 500);
  }
}
</script>
<style>
.big-clock {
  cursor: default;
  font-size: 1050%;
  color: #fff;
  letter-spacing: -5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
</style>